<%@page contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<jsp:include page="head.jsp"></jsp:include>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制台</title>
		<link rel="stylesheet" type="text/css" href="../../statics/css/identify.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/control_index.css" />
		<script type="text/javascript" src="../../statics/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../statics/js/haidao.offcial.general.js"></script>
		<script type="text/javascript" src="../../statics/js/select.js"></script>
		<script type="text/javascript" src="../../statics/js/haidao.validate.js"></script>
	</head>
	<style>
		a{
			color:#666; font-size:14px;
		}

	</style>

	<body>


        <div class="view-body">

			<div class="view-product">
				<div class="authority">
					<div class="authority-head">
						<div class="manage-head">
							<h6 class="layout padding-left manage-head-con">业主查询</h6>
						</div>
					</div>

					<div class="authority-content">

						<div class="list-content show">
							<div class="offcial-table tr-border margin-big-top clearfix" >
								<div class="unit-style padding-big-lr clearfix">
									<form id="cxform">
									<div class="real-name-con height-main margin-top-25">
										<p class="content-left-zoon">
											业主姓名：
										</p>
										<div class="content-right-zoon">
											<input class="width-main input" type="text" name="yzxm" datatype="*" value="">
										</div>
									</div>
									<div class="real-name-con margin-top-25">
										<p class="content-left-zoon ">
											业主身份证号码：
										</p>
										<div class="content-right-zoon">
											<input class="width-main input" type="text" name="yzzjhm" datatype="*" value="">
										</div>
									</div>
										<%--隐藏域--%>
										<input  type="hidden" id="pageCurrent" name="pageCurrent" datatype="*" value="">

									</form>
									<div class="real-name-con margin-top-25">
										<div class="margin-large-top padding-left text-left content-right-zoon">
											<input type="button" value="查 询" class="submit fl" id = "find" style="margin-left: 80px">
										</div>
									</div>

								</div>

								<div class="tr-th clearfix" style="margin-top: 25px" >
									<div class="th w10">
										序号
									</div>
									<div class="th w20">
										车主姓名
									</div>
									<div class="th w10">
										性  别
									</div>
									<div class="th w15">
										证件号码
									</div>
									<div class="th w15">
										手机号码
									</div>
									<div class="th w15">
										地  址
									</div>
									<div class="th w15">
										操 作
									</div>
								</div>
								<div  class="tr clearfix border-bottom-none" id ='owner_list' >
										<%--此处追加数据--%>
								</div>

							</div>
						</div>
						<div class="show-page padding-big-right">
							<div class="page">
								<div class="page">
									<ul class="offcial-page margin-top margin-big-right">
										<span id="pageId">
									<a class="first" style="cursor:pointer;">首页</a>
									<a class="pre" style="cursor:pointer;">上一页</a> 
											<a class="mynext" style="cursor:pointer;">下一页</a>
											<a class="mylast" style="cursor:pointer;">尾页</a>
		                            <a class="pageCount" style="cursor:pointer;">总页数(1)</a>
		                            <a class="pageCurrent"  style="cursor:pointer;">当前页(1)</a>
										</span>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
            $("#find").click(function () {
                $('#pageCurrent').val(1);
                doGetObjects();
            });
            $(".mynext").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".pre").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".first").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".mylast").click(function () {
                jumpToPage($(this).attr("class"));
            });

            function deleteowner(owner_zjhm){
                var url = "http://localhost:8888/manage/deleteOwnerBySfz"+"?timestamp=" + new Date().getTime()+"&owner_zjhm="+owner_zjhm;
                if(confirm('删除该业主将同时删除该业主下的车辆，是否继续？')){
                    $.get(url, function (data) {
                        if(data.success == true){
                            alert(data.mes);
                        }else{
                            alert(data.mes);
						}
                    });
                }else{
                    return;
				}
                doGetObjects();
            }

            function doGetObjects() {
                //1.定义访问项目信息的url
                var url = "http://localhost:8888/manage/getOwnerMessage"+"?timestamp=" + new Date().getTime();
                //2.获取表单数据(查询时用)
                var params = $('#cxform').serialize();
                //3.动态设置分页页码数据
                var pageCurrent = $('#pageId').data("pageCurrent");
               // if (!pageCurrent) pageCurrent = 1;
               // params.pageCurrent = pageCurrent;

                //4.发起异步ajax请求{name:"",valid:"",pageCurrent:1}
                $.get(url, params, function (data) {//result-->JsonResult-->{}
                    console.log(data);
                    if (data.serverResponse.status == 1) {
                        var htmladd="";
                        var num = data.serverResponse.data.length;
                        if(num == 0){
                            $("#owner_list").empty();
                            alert("暂无数据！");
                            return ;
                        }
                        //设置当前页数据
                        $("#owner_list").empty();
                        for (var x = 0; x < num; x++) {
                            htmladd += '<div class="tr clearfix border-bottom-none" >';
                            htmladd += '<div class="td w10" style="font-size: 15px;color:black;"> ' + (x + 1) + '</div>';
                            htmladd += '<div class="td w20" style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_name + '</div>';
                            htmladd += '<div class="td w10" style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_sex + '</div>';
                            htmladd += '<div class="td w15" style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_zjhm + '</div>';
                            htmladd += '<div class="td w15" style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_phone + '</div>';
                            htmladd += '<div class="td w15" style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_address + '</div>';
                            htmladd += '<div class="td w15" onclick="deleteowner('+data.serverResponse.data[x].owner_zjhm+')"  style="font-size: 15px;color:red;cursor:pointer;" >' + '删 除' + '</div>';
                            htmladd += ' </div>';
                        }
                        $("#owner_list").append(htmladd);

                        //设置分页信息(setPagination方法在page.js中)
                        //console.log(result.pageObject);//undefined
                        setPagination(data.pageObject);
                    } else {
                        alert("系统错误");
                    }
                });
            }

			/*分页开始*/


            //设置分页
            function setPagination(pageObject){
                //1.初始化总页数
                $(".pageCount").html("总页数("+pageObject.pageCount+")");
                //2.初始化当前页的页码
                $(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
                //3.在pageId对应的对象上绑定总页数
                //data函数用于以key/value的方式在对象上绑定数据
                $("#pageId").data("pageCount",
                    pageObject.pageCount);
                //4.在pageId对象的对象上绑定当前页面值
                $("#pageId").data("pageCurrent",pageObject.pageCurrent);
              //  alert(pageObject.pageCurrent);
            }


            //定义一个函数,通过此函数实现页面的跳转
            function jumpToPage(clazz){

                //获得点击对象上class属性对应的值,根据此值
                //判定具体点击的是哪个对象(例如上一页,下一页)
              //  var clazz=$(this).attr("class");
                //获得pageId对象上绑定的pageCurrent对应的值
                var pageCurrent=$('#pageId').data("pageCurrent");
                //获得pageId对象上绑定的pageCount对应的值
                var pageCount=$('#pageId').data("pageCount")
                //根据class属性的值判断点击的是否是上一页
                if(clazz=='pre'&&pageCurrent>1){
                    pageCurrent--;
                }
                //判断点击的是否是下一页
                if(clazz=="mynext"&&pageCurrent<pageCount){
                    pageCurrent++;
                }
                //判断点击的对象是否是首页
                if(clazz=="first"){
                    pageCurrent=1;
                }
                //判定点击的对象是否是尾页
                if(clazz=="mylast"){
                    pageCurrent=pageCount;
                }
                //重写绑定pageCurrent的值,
                $('#pageCurrent').val(pageCurrent);
                //重新执行查询操作(根据pageCurrent的值)
                doGetObjects();
            }

         /*分页结束*/
		</script>
	</body>

</html>